import _ from 'lodash';
import { useEffect, useState } from 'react';
import { roleService } from '@/utils/leancloud-helper';
import { Button, Input, List, Toast, Space, Dialog } from 'antd-mobile';
import { EditSFill, DeleteOutline, VideoOutline } from 'antd-mobile-icons';
import emitter from '@/utils/mybus'

export default () => {
  useEffect(() => {
    syncRoles();
  }, []);

  const initRole = { name: '' };
  const [role, setRole] = useState(_.cloneDeep(initRole));
  const [visible, setVisible] = useState(false);
  const [roles, setRoles] = useState([]);

  const syncRoles = async () => {
    const res = await roleService.query();
    setRoles(res);
  };

  const onConfirm = async () => {
    if (role.id) {
      await roleService.update(role);
    } else {
      await roleService.save(role);
    }
    Toast.show({
      icon: 'success',
      content: '保存成功',
      afterClose() {
        setVisible(false);
        syncRoles();
        emitter.emit('syncRoles')
      }
    });
  };

  const onAddOrEdit = (item) => {
    setRole(item ? { id: item.id, name: item.attributes.name } : _.cloneDeep(initRole));
    setVisible(true);
  };

  const onRemove = async (id) => {
    await roleService.remove(id);
    syncRoles();
    emitter.emit('syncRoles')
  };
  return (
    <>
      <Button
        size="small"
        color="primary"
        fill="solid"
        onClick={() => {
          onAddOrEdit();
        }}>
        <VideoOutline /> 创建角色
      </Button>

      <div className="roles">
        {roles.map((item) => (
          <div className="role" key={item.id}>
            <div>{item.attributes.name}</div>
            <Space>
              <EditSFill
                onClick={() => {
                  onAddOrEdit(item);
                }}
              />
              <DeleteOutline
                onClick={() => {
                  Dialog.confirm({
                    content: '确定删除？',
                    onConfirm: async () => {
                      await onRemove(item.id);
                    }
                  });
                }}
              />
            </Space>
          </div>
        ))}
      </div>
      <Dialog
        title={role?.id ? '编辑角色' : '创建角色'}
        visible={visible}
        content={
          <>
            <Input
              placeholder="请输入角色名称"
              value={role.name}
              onChange={(val) => {
                role.name = val;
                setRole({ ...role });
              }}
            />
            <div className="addrole-actions">
              <Button
                color="success"
                fill="solid"
                onClick={() => {
                  onConfirm();
                }}>
                提交
              </Button>
              <Button
                fill="outline"
                onClick={() => {
                  setVisible(false);
                }}>
                取消
              </Button>
            </div>
          </>
        }
        onClose={() => {
          setVisible(false);
        }}
      />
    </>
  );
};
